<template>
  <page-frame>
    <div class="servicePlancomboName">
      <div class="toptitle">
        <div class="left">服务套餐</div>
        <div class="right">
          <div class="btns">
            <router-link :to="{name:'addTemplate',params:{way:1,comboId:0}}"><el-button class="lightGreenBtn">新增套餐</el-button></router-link>
          </div>
        </div>
      </div>
      <div class="borderT"></div>
      <div class="tabChange">
        <el-button @click="toggle(index,tab.id)" v-for="(tab,index) in SERVICE_COMBO_OPTION" :class="{lightGreenBtn:active===index}">{{tab.text}}</el-button>
      </div>
      <el-table
        :data="tableData"
        border
        @row-dblclick = "handleRowClick"
        style="width: 100%">
        <el-table-column
          prop="comboName"
          label="套餐名称"
          width="">
        </el-table-column>
        <el-table-column
          prop="typeName"
          label="套餐类型"
          width="">
        </el-table-column>
        <el-table-column
          prop="lname"
          label="照护等级"
          width="">
        </el-table-column>
        <el-table-column
          prop="description"
          label="描述"
          width="">
        </el-table-column>
        <el-table-column
          label="操作"
          width="150">
          <template scope="scope">
            <el-button type="text" size="small" @click.stop="edit(scope.row)">修改</el-button>
            <el-button type="text" size="small" @click.stop="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChangePage"
            :current-page="currentPage"
            :page-size="10"
            layout="total, prev, pager, next"
            :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
  </page-frame>
</template>

<script >
  import comboApi from '../../service/serManagement/comboApi'

  export default {
    data () {
      return {
        active:0,
        tableData: [],
        SERVICE_COMBO_OPTION:[{
            id:0,
            text:"全部",
            value:"全部",
          },{
            id:1,
            text:"基础套餐",
            value:"基础套餐",
          },{
            id:2,
            text:"增值套餐",
            value:"增值套餐",
          }],
        total:0,
        query:{
          type: 0
        },
        currentPage:1,
      }
    },
    methods: {
      init() {
        this.loadTableData();
      },
      /**
       * 加载页面数据
       */
      loadTableData(){
        let self = this;
        comboApi.getServiceComboList(10,self.currentPage,self.query).then(function (response) {
          self.tableData = response.body.data.list;
          self.total = response.body.data.total;
          for(let i=0;i<self.tableData.length;i++){
            switch(self.tableData[i].type){
              case 1:
                self.tableData[i].typeName = '基础套餐';
                break;
              case 2:
                self.tableData[i].typeName = '增值套餐';
                break;
            }
          }
        })
      },
      /**
       * tab切换
       */
      toggle(index,id){
        this.active = index;
        this.query.type = id;
        console.debug(id);
        this.loadTableData();
      },
      /**
       * 编辑
       */
      edit(row){
        this.$router.push({name: 'addTemplate',params:{way:2,comboId:row.comboId}});
      },
      /**
       * 删除
       */
      del(row){
        let self = this;
        self.$confirm('继续点击「确认」，将删除该条内容及其所有关联项目', '删除成员', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          comboApi.deleteCombo(row.comboId).then(function () {
            self.$message({
              type: 'success',
              message: '删除成功!'
            });
            self.loadTableData();
          },function (){
            self.$message({
              type: 'warning',
              message: '删除失败!'
            });
          });
        }).catch(() => {
          self.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      /**
       * 单击行进入详情
       */
      handleRowClick(row){
       this.$router.push({name: 'addTemplate',params:{way:0,comboId:row.comboId}});
      },
      /**
       * 分页函数
       */
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChangePage(val) {
        this.currentPage = val;
        console.log(`当前页: ${val}`);
        this.loadTableData();
      },
    },

    mounted: function () {
      this.init();
    },
  }
</script>
<style>

</style>
